<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>求购</title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<style>
			body{
				background: #fff;
				font-size: 13px;
			}
			.contain-left {
				width: 25%;
				text-align: center;
				float: left;
			}
			.contain-left .aui-list-view-cell{
				padding:12px;

			}
			.aui-list-view:after{
				border:none;
			}
			.contain-left .active{
				color:#fa5354;
				border:none;
				background: #f3f3f2
			}
			.contain-right{
				padding: 12px;
				width: 75%;
				float: left;
			}
			.contain-right .pic img{
				width: 100%;
			}
			.tuijian-title{
				padding:8px;
			}
			.other{
				display: none;
				text-align: center;
			}
			.other .aui-list-view-cell{
				padding:8px 0;
			}
			.other .aui-list-view-cell:after{
				border:none;
			}
		</style>
	</head>
	<body>
		<header>
			<div class="search">
				<div class="aui-searchbar-wrap demo" id="search">
				    <div class="aui-searchbar aui-border-radius" tapmode onclick="doSearch()">
				        <i class="aui-iconfont aui-icon-search"></i>
				        <div class="aui-searchbar-text">请输入搜索内容</div>
				        <div class="aui-searchbar-input">
				        	<form action="javascript:search();">
				        	<input type="search" placeholder="请输入搜索内容" id="search-input">
				        	</form>
				        </div>
				        <i class="aui-iconfont aui-icon-roundclosefill" tapmode onclick="clearInput()"></i>
				    </div>
				    <div class="aui-searchbar-cancel aui-text-info" tapmode onclick="cancelSearch()">取消</div>
				</div>
			</div>
		</header><!-- /header -->
		<div class="contain">
			<div class="contain-left">
				<div class="aui-content">
				    <ul class="aui-list-view">
				        <li class="aui-list-view-cell  active">
				            商品推荐
				        </li>
				        <li class="aui-list-view-cell aui-border-l aui-border-r">
				            天然原料
				        </li>
				        <li class="aui-list-view-cell aui-border-l aui-border-r">
				            化纤
				        </li>
				        <li class="aui-list-view-cell aui-border-l aui-border-r">
				            纱线
				        </li>
				    </ul>
				</div>
			</div>
			<div class="contain-right">
				<div class="pic">
					<img src="../image/gongying.jpg" alt="">
				</div>
				<div class="tuijian">
					<!-- 推荐 -->
					<div class="aui-content">
					    <div class="tuijian-title">品牌推荐</div>
					    <ul class="aui-list-view aui-grid-view">
				            <li class="aui-list-view-cell aui-img aui-col-xs-4">
				                <img class="aui-img-object" src="../image/shili.jpg">
				                <div class="aui-img-body">
				                    大象服饰
				                </div>
				            </li>
				            <li class="aui-list-view-cell aui-img aui-col-xs-4">
				                <img class="aui-img-object" src="../image/shili.jpg">
				                <div class="aui-img-body">
				                    大象服饰
				                </div>
				            </li>
				            <li class="aui-list-view-cell aui-img aui-col-xs-4">
				                <img class="aui-img-object" src="../image/shili.jpg">
				                <div class="aui-img-body">
				                    大象服饰
				                </div>
				            </li>
				            <li class="aui-list-view-cell aui-img aui-col-xs-4">
				                <img class="aui-img-object" src="../image/shili.jpg">
				                <div class="aui-img-body">
				                    大象服饰
				                </div>
				            </li>
				            <li class="aui-list-view-cell aui-img aui-col-xs-4">
				                <img class="aui-img-object" src="../image/shili.jpg">
				                <div class="aui-img-body">
				                    大象服饰
				                </div>
				            </li>
				        </ul>
				    </div>
				    <!-- 热门分类 -->
				    <div class="aui-content">
					    <div class="tuijian-title">热门分类</div>
					    <ul class="aui-list-view aui-grid-view">
				            <li class="aui-list-view-cell aui-img aui-col-xs-4">
				                <img class="aui-img-object" src="../image/shili.jpg">
				                <div class="aui-img-body">
				                    大象服饰
				                </div>
				            </li>
				            <li class="aui-list-view-cell aui-img aui-col-xs-4">
				                <img class="aui-img-object" src="../image/shili.jpg">
				                <div class="aui-img-body">
				                    大象服饰
				                </div>
				            </li>
				            <li class="aui-list-view-cell aui-img aui-col-xs-4">
				                <img class="aui-img-object" src="../image/shili.jpg">
				                <div class="aui-img-body">
				                    大象服饰
				                </div>
				            </li>
				            <li class="aui-list-view-cell aui-img aui-col-xs-4">
				                <img class="aui-img-object" src="../image/shili.jpg">
				                <div class="aui-img-body">
				                    大象服饰
				                </div>
				            </li>
				            <li class="aui-list-view-cell aui-img aui-col-xs-4">
				                <img class="aui-img-object" src="../image/shili.jpg">
				                <div class="aui-img-body">
				                    大象服饰
				                </div>
				            </li>
				        </ul>
				    </div>
				</div>
				<!-- 非热门 -->
				<div class="other">
					<ul>
						<li class="aui-list-view-cell aui-img aui-col-xs-4">
						    <div class="aui-img-body">
						        大象、服饰
						    </div>
						</li>
						<li class="aui-list-view-cell aui-img aui-col-xs-4">
						    <div class="aui-img-body">
						        大象服饰
						    </div>
						</li>
						<li class="aui-list-view-cell aui-img aui-col-xs-4">
						    <div class="aui-img-body">
						        大象服饰
						    </div>
						</li>
						<li class="aui-list-view-cell aui-img aui-col-xs-4">
						    <div class="aui-img-body">
						        大象服饰
						    </div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js" ></script>
	<script type="text/javascript" src="../script/doT.min.js"></script>
	<script type="text/javascript" src="../script/echo.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script type="text/javascript" src="../script/myInfo.js"></script>
	<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
	<script type="text/javascript">
		apiready = function() {
			api.parseTapmode();
			// getData();
			// api.setRefreshHeaderInfo({
			// 	visible : true,
			// 	loadingImg : 'widget://image/ptr_pull.png',
			// 	bgColor : '#efeff4',
			// 	textColor : '#959595',
			// 	textDown : '下拉刷新',
			// 	textUp : '松开刷新',
			// 	showTime : true
			// }, function(ret, err) {
			// 	page = 1;
			// 	getData();
			// 	api.refreshHeaderLoadDone();
			// });
			//重新登录监听
			// api.addEventListener({
			// 	name : 'reGetMyInfo'
			// }, function(ret) {
			// 	if (ret && ret.value) {
			// 		page = 1;
			// 		getData();
			// 	}
			// });
		}
		///切换左侧分类的样式
		$(document).on("click",".contain-left li",function(){
			$(".contain-left li").removeClass("active").addClass("aui-border-l").addClass("aui-border-r");
			$(this).addClass("active").removeClass("aui-border-l").removeClass("aui-border-r");
			if($(this).index()==0){
				$(".tuijian").css({"display":"block"});
				$(".other").css({"display":"none"});
			}else{
				$(".tuijian").css({"display":"none"});
				$(".other").css({"display":"block"});
			}
		})
		function doSearch(){
			$api.addCls($api.dom(".aui-searchbar-wrap"),"focus");
			$api.dom('.aui-searchbar-input input').focus();
		}
		function cancelSearch(){
			$api.removeCls($api.dom(".aui-searchbar-wrap.focus"),"focus");
			$api.val($api.byId("search-input"),'');
			$api.dom('.aui-searchbar-input input').blur();
		}
		function clearInput(){
			$api.val($api.byId("search-input"),'');
		}
		function search(){
			var content = $api.val($api.byId("search-input"));
			if(content){
				api.alert({
				    title: '搜索提示',
				    msg: '您输入的内容为：'+content
				});
			}else{
				api.alert({
				    title: '搜索提示',
				    msg: '您没有输入任何内容'
				});
			}
			cancelSearch();
		}
		
	</script>
</html>